<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  
    <style>
        *{margin: 0;padding: 0}
        .I{width:80%;margin:10% auto}
        .sorry{margin:10px}
       .very{width:75%;margin:30% auto;}
       .veryto{width:75%;margin:30% auto;display: none}
       .verythree{width:75%;margin:30% auto;display: none}
       .veryf{width:75%;margin:30% auto;display: none}
       .very>div{display: none}
       .very>p{display: none}
       .good{width:100%;position: relative;}
       .good button{ width:45%;margin:5px}
    </style>

</head>
<body>
    <div  class="I">
            <P>请根据提示操作:</P>
            <input type="text" class="sorry" value="">


            <div class="very">
              
                <div class="good">
                        <p class="now">现在妳准备好了么:</p>
                    <br>
                    <button id="yes">是的</button><button id="no">我还要在考虑一下</button>
                </div>            
            </div>
            <div class="veryto">那么，现在开始,记得输入一个字母按一次回车或者开始键</div>
            <div class="verythree">
            <div class="name">请输入第<span class="index">1</span>个小写字母：<span class="NUM">T</span>按一次回车或者开始键</div>   
        </div>
        <div class="veryf">
                也许没有看懂吧！，那么等待两秒！
            </div>
        <div class="odl">
            <p class="pp"></p>
        </div>
    </div>
   
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.1-rc1/jquery.js"></script>
<script>
   $(function(){
       $(".now").fadeIn(2000)
  
        $(".good").fadeIn(5000)
        $("#no").on("click",function(){
            $(this).css("display","none")
            $("#yes").css("width","80%")
    
        })
    $("#yes").on("click",function(){
      
        $(".very").fadeOut(2000);
        setTimeout(function(){
            $(".veryto").fadeIn(2000)  
        },2000)
    clearInterval()
    setTimeout(function(){
            $(".veryto").fadeOut(2000)  
            setTimeout(function(){
              
            $(".verythree").fadeIn(2000)  
           
        },4000)
        },2000)

      clearTimeout()
    
      $('.sorry').bind('keypress',function(event){  
          if($(".sorry").val()=="t"){
             $(".pp").html("thank") 
             $(".index").html(2)
             $(".NUM").html("Y")
          }""
          if($(".sorry").val()=="ty"){
             $(".pp").html("thank you")
             $(".index").html(3)
             $(".NUM").html("F")
          }
          if($(".sorry").val()=="tyf"){
             $(".pp").html("thank you for") 
             $(".index").html(4)
             $(".NUM").html("T")
          }
          if($(".sorry").val()=="tyft"){
             $(".pp").html("thank you for the")
             $(".index").html(5)
             $(".NUM").html("P")
          }
          if($(".sorry").val()=="tyftp"){
             $(".pp").html("thank you for the  past, but")
             $(".index").html(6)
             $(".NUM").html("B")
          }
          if($(".sorry").val()=="tyftpb"){
             $(".pp").html("thank you fot the  past,  but beacuse") 
             $(".index").html(7)
             $(".NUM").html("O")
          }
          if($(".sorry").val()=="tyftpbo"){
             $(".pp").html("thank you fot the  past, but beacuse of")
             $(".index").html(8)
             $(".NUM").html("M")
          }
          if($(".sorry").val()=="tyftpbom"){
             $(".pp").html("thank you fot the  past, but beacuse of my") 
             $(".index").html(9)
             $(".NUM").html("P")
          }
          if($(".sorry").val()=="tyftpbomp"){
             $(".pp").html("thank you fot the  past, but beacuse my problem")
             $(".index").html(10)
             $(".NUM").html("A")
          }
          if($(".sorry").val()=="tyftpbompa"){
             $(".pp").html("thank you fot the  past, but beacuse my problem and")
             $(".index").html(11)
             $(".NUM").html("L")
          }
          if($(".sorry").val()=="tyftpbompal"){
             $(".pp").html("Thank you for the past, but because of my problem and leave")
             $(".index").html(12)
             $(".NUM").html("N")
          }
          if($(".sorry").val()=="tyftpbompaln"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now")
             $(".index").html(13)
             $(".NUM").html("I")
          }
          if($(".sorry").val()=="tyftpbompalni"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I")
             $(".index").html(14)
             $(".NUM").html("C")
          }
          if($(".sorry").val()=="tyftpbompalnic"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can")
             $(".index").html(15)
             $(".NUM").html("B")
          }
          if($(".sorry").val()=="tyftpbompalnicb"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become")
             $(".index").html(16)
             $(".NUM").html("V")
          }
          if($(".sorry").val()=="tyftpbompalnicbv"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very")
             $(".index").html(17)
             $(".NUM").html("G")
          }
          if($(".sorry").val()=="tyftpbompalnicbvg"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good")
             $(".index").html(18)
             $(".NUM").html("Y")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgy"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you")
             $(".index").html(19)
             $(".NUM").html("W")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgyw"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want")
             $(".index").html(20)
             $(".NUM").html("T")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywt"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to")
             $(".index").html(21)
             $(".NUM").html("C")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtc"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come")
             $(".index").html(22)
             $(".NUM").html("B")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcb"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back")
             $(".index").html(23)
             $(".NUM").html("O")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbo"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once")
             $(".index").html(24)
             $(".NUM").html("T")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbot"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the")
             $(".index").html(25)
             $(".NUM").html("P")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbotp"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the problem")
             $(".index").html(26)
             $(".NUM").html("I")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbotpi"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the problem I")
             $(".index").html(27)
             $(".NUM").html("W")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbotpiw"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the problem I will")
             $(".index").html(28)
             $(".NUM").html("B")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbotpiwb"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the problem I will be")
             $(".index").html(29)
             $(".NUM").html("C")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbotpiwbc"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the problem I will be corrected")
             $(".index").html(30)
             $(".NUM").html("T")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbotpiwbct"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the problem I will be corrected, this")
             $(".index").html(31)
             $(".NUM").html("I")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbotpiwbcti"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the problem I will be corrected, this is")
             $(".index").html(32)
             $(".NUM").html("Y")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbotpiwbctiy"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the problem I will be corrected, this is your")
             $(".index").html(33)
             $(".NUM").html("G")
          }
          if($(".sorry").val()=="tyftpbompalnicbvgywtcbotpiwbctiyg"){
             $(".pp").html("Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the problem I will be corrected, this is your guarantee")
             $(".verythree").html("请按下最后一个回车或者开始")
             $(".NUM").html("")
             setTimeout(function(){
                $(".verythree").fadeOut(2000)
                setTimeout(function(){
              
            $(".veryf").fadeIn(2000)  
            setTimeout(function(){
              
            $(".sorry").val("I  NEED  YOU")
           
                },6000)
                },2000)

             },2000)
          }

}); 
        
    }) 

    // Thank you for the past, but because of my problem and leave, now I can become very good, you want to come back, once the problem I will be corrected, this is your guarantee
   })

</script>
</html>